[id].vue 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740
  1. <template>
  2. <div>
  3. <HomePageHead></HomePageHead>
  4. <HomePageNavigation></HomePageNavigation>
  5. <HomeSecondaryHeading :titleData="pageData"></HomeSecondaryHeading>
  6. <div class="farmingPartOne">
  7. <div class="inner">
  8. <div class="innerLeft" v-if="pageData.length>0">
  9. <div class="title">
  10. <h3>
  11. <NuxtLink :to="{ path: `/newsList/${pageData[0].cid}`}" v-if="pageData[0]" :title="pageData[0].alias">
  12. {{ pageData[0].alias }}
  13. </NuxtLink>
  14. <span>
  15. <NuxtLink
  16. :to="{ path: `/newsList/${pageData[0].cid}`}"
  17. v-if="pageData[0]" :title="pageData[0].title">查看更多</NuxtLink>
  18. </span>
  19. </h3>
  20. </div>
  21. <div class="leftTop" v-if="pageData[0].data[0]">
  22. <div class="leftTopPhoto left" v-if="pageData[0].data[0]">
  23. <NuxtLink :to="item.linkurl" v-if="pageData[0].data[0]&&pageData[0].data[0].islink==1" :title="pageData[0].data[0].title">
  24. <img :src="pageData[0].data[0].imgurl" :alt="pageData[0].data[0].title">
  25. <span>{{pageData[0].data[0].title }}</span>
  26. </NuxtLink>
  27. <NuxtLink :to="{ path: `/newsDetail/${pageData[0].data[0].id}`}"
  28. v-if="pageData[0].data[0]&&pageData[0].data[0].islink==0" :title="pageData[0].data[0].title">
  29. <img :src="pageData[0].data[0].imgurl" :alt="pageData[0].data[0].title">
  30. <span>{{pageData[0].data[0].title}}</span>
  31. </NuxtLink>
  32. </div>
  33. <ul class="left">
  34. <li v-for="item in pageData[0].data3">
  35. <em></em>
  36. <span>
  37. <NuxtLink :to="item.linkurl" v-if="item.islink==1" :title="item.title">{{ item.title }}</NuxtLink>
  38. <NuxtLink
  39. :to="{ path: `/newsDetail/${item.id}`}"
  40. v-if="item.islink==0" :title="item.title">{{ item.title }}
  41. </NuxtLink>
  42. </span>
  43. </li>
  44. </ul>
  45. </div>
  46. <ul class="leftBottom" v-if="pageData[0].data2[0]!=null">
  47. <li v-for="item in pageData[0].data2">
  48. <NuxtLink :to="item.linkurl" v-if="item.islink==1" :title="item.title">
  49. <img :src="item.imgurl" :alt="item.title">
  50. </NuxtLink>
  51. <NuxtLink
  52. :to="{ path: `/newsDetail/${item.id}`}"
  53. v-if="item.islink==0" :title="item.title">
  54. <img :src="item.imgurl" :alt="item.title">
  55. </NuxtLink>
  56. <p>
  57. <NuxtLink :to="item.linkurl" v-if="item.islink==1" :title="item.title">{{ item.title }}</NuxtLink>
  58. <NuxtLink
  59. :to="{ path: `/newsDetail/${item.id}`}"
  60. v-if="item.islink==0" :title="item.title">{{ item.title }}</NuxtLink>
  61. </p>
  62. </li>
  63. </ul>
  64. </div>
  65. <div class="innerRight" v-if="pageData.length>=2">
  66. <div class="title">
  67. <h3>
  68. <NuxtLink :to="{ path: `/newsList/${pageData[1].cid}`}" v-if="pageData[1]" :title="pageData[1].alias">
  69. {{ pageData[1].alias }}
  70. </NuxtLink>
  71. <span>
  72. <NuxtLink
  73. :to="{ path: `/newsList/${pageData[1].cid}`}"
  74. v-if="pageData[1]" :title="pageData[1].title">查看更多</NuxtLink>
  75. </span>
  76. </h3>
  77. </div>
  78. <ul class="rightList">
  79. <li v-for="item in pageData[1].data">
  80. <NuxtLink :to="item.linkurl" v-if="item.islink==1" :title="item.title">{{ item.title }}</NuxtLink>
  81. <NuxtLink
  82. :to="{ path: `/newsDetail/${item.id}`}"
  83. v-if="item.islink==0" :title="item.title">
  84. <img class="left" :src="item.imgurl" :alt="item.title">
  85. </NuxtLink>
  86. <p class="left">
  87. <NuxtLink :to="item.linkurl" v-if="item.islink==1" :title="item.title">{{ item.title }}</NuxtLink>
  88. <NuxtLink
  89. :to="{ path: `/newsDetail/${item.id}`}"
  90. v-if="item.islink==0" :title="item.title">
  91. {{ item.title }}
  92. </NuxtLink>
  93. </p>
  94. </li>
  95. </ul>
  96. </div>
  97. </div>
  98. </div>
  99. <HomeTopTen :imgurl="adImg1" v-if="adImg1"></HomeTopTen>
  100. <div class="farmingPartTwo" v-if="pageData.length>=3">
  101. <div class="inner">
  102. <div class="farmer" v-if="pageData.length>=3">
  103. <div class="title">
  104. <h3>
  105. <NuxtLink :to="{ path: `/newsList/${pageData[2].cid}`}" v-if="pageData[2]" :title="pageData[2].alias">
  106. {{ pageData[2].alias }}
  107. </NuxtLink>
  108. <span>
  109. <NuxtLink
  110. :to="{ path: `/newsList/${pageData[2].cid}`}"
  111. v-if="pageData[2]" :title="pageData[2].title">查看更多</NuxtLink>
  112. </span>
  113. </h3>
  114. </div>
  115. <div class="PartTwoPhoto">
  116. <div v-if="pageData[2].data[0]">
  117. <NuxtLink :to="item.linkurl" v-if="pageData[2].data[0].islink==1" :title="pageData[2].data[0].title">
  118. <img :src="pageData[2].data[0].imgurl" :alt="pageData[2].data[0].title">
  119. <span>{{ pageData[2].data[0].title }}</span>
  120. </NuxtLink>
  121. <NuxtLink
  122. :to="{ path: `/newsDetail/${pageData[2].data[0].id}`}"
  123. v-if="pageData[2].data[0].islink==0" :title="pageData[2].data[0].title">
  124. <img :src="pageData[2].data[0].imgurl" :alt="pageData[2].data[0].title">
  125. <span>{{ pageData[2].data[0].title }}</span>
  126. </NuxtLink>
  127. </div>
  128. </div>
  129. <ul class="PartTwoList">
  130. <li v-for="item in pageData[2].data2">
  131. <em></em>
  132. <NuxtLink :to="item.linkurl" v-if="item.islink==1" :title="item.title">{{ item.title }}</NuxtLink>
  133. <NuxtLink
  134. :to="{ path: `/newsDetail/${item.id}`}"
  135. v-if="item.islink==0" :title="item.title">{{ item.title }}</NuxtLink>
  136. </li>
  137. </ul>
  138. </div>
  139. <div class="farmer" v-if="pageData.length>=4">
  140. <div class="title">
  141. <h3>
  142. <NuxtLink :to="{ path: `/newsList/${pageData[3].cid}`}" v-if="pageData[3]" :title="pageData[3].alias">
  143. {{ pageData[3].alias }}
  144. </NuxtLink>
  145. <span>
  146. <NuxtLink
  147. :to="{ path: `/newsList/${pageData[3].cid}`}"
  148. v-if="pageData[3]" :title="pageData[3].title">查看更多</NuxtLink>
  149. </span>
  150. </h3>
  151. </div>
  152. <div class="PartTwoPhoto">
  153. <div v-if="pageData[3].data[0]">
  154. <NuxtLink :to="item.linkurl" v-if="pageData[3].data[0].islink==1" :title="pageData[3].data[0].title">
  155. <img :src="pageData[3].data[0].imgurl" :alt="pageData[3].data[0].title">
  156. <span>{{ pageData[3].data[0].title }}</span>
  157. </NuxtLink>
  158. <NuxtLink
  159. :to="{ path: `/newsDetail/${pageData[3].data[0].id}`}"
  160. v-if="pageData[3].data[0].islink==0" :title="pageData[3].data[0].title">
  161. <img :src="pageData[3].data[0].imgurl" :alt="pageData[3].data[0].title">
  162. <span>{{ pageData[3].data[0].title }}</span>
  163. </NuxtLink>
  164. </div>
  165. </div>
  166. <ul class="PartTwoList">
  167. <li v-for="item in pageData[3].data2">
  168. <em></em>
  169. <NuxtLink :to="item.linkurl" v-if="item.islink==1" :title="item.title">{{ item.title }}</NuxtLink>
  170. <NuxtLink
  171. :to="{ path: `/newsDetail/${item.id}`}"
  172. v-if="item.islink==0" :title="item.title">{{ item.title }}</NuxtLink>
  173. </li>
  174. </ul>
  175. </div>
  176. <div class="farmer" v-if="pageData.length>=5">
  177. <div class="title">
  178. <h3>
  179. <NuxtLink :to="{ path: `/newsList/${pageData[4].cid}`}" v-if="pageData[4]" :title="pageData[4].alias">
  180. {{ pageData[4].alias }}
  181. </NuxtLink>
  182. <span>
  183. <NuxtLink
  184. :to="{ path: `/newsList/${pageData[4].cid}`}"
  185. v-if="pageData[4]" :title="pageData[4].title">查看更多</NuxtLink>
  186. </span>
  187. </h3>
  188. </div>
  189. <div class="PartTwoPhoto">
  190. <div v-if="pageData[4].data[0]">
  191. <NuxtLink :to="item.linkurl" v-if="pageData[4].data[0].islink==1" :title="pageData[4].data[0].title">
  192. <img :src="pageData[4].data[0].imgurl" :alt="pageData[4].data[0].title">
  193. <span>{{ pageData[4].data[0].title }}</span>
  194. </NuxtLink>
  195. <NuxtLink
  196. :to="{ path: `/newsDetail/${pageData[4].data[0].id}`}"
  197. v-if="pageData[4].data[0].islink==0" :title="pageData[4].data[0].title">
  198. <img :src="pageData[4].data[0].imgurl" :alt="pageData[4].data[0].title">
  199. <span>{{ pageData[4].data[0].title }}</span>
  200. </NuxtLink>
  201. </div>
  202. </div>
  203. <ul class="PartTwoList">
  204. <li v-for="item in pageData[4].data2">
  205. <em></em>
  206. <NuxtLink :to="item.linkurl" v-if="item.islink==1" :title="item.title">{{ item.title }}</NuxtLink>
  207. <NuxtLink
  208. :to="{ path: `/newsDetail/${item.id}`}"
  209. v-if="item.islink==0" :title="item.title">
  210. {{ item.title }}
  211. </NuxtLink>
  212. </li>
  213. </ul>
  214. </div>
  215. </div>
  216. </div>
  217. <HomeTopTen :imgurl="adImg2" v-if="adImg2"></HomeTopTen>
  218. <div class="zixuntuijian" v-if="pageData.length>=6">
  219. <div class="inner">
  220. <div class="innerLeft" >
  221. <div class="zixunTop">
  222. <div class="zixunLeft" v-if="pageData.length>=6">
  223. <div class="title">
  224. <h3>
  225. <NuxtLink :to="{ path: `/newsList/${pageData[5].cid}`}" v-if="pageData[5]" :title="pageData[5].alias">
  226. {{ pageData[5].alias }}
  227. </NuxtLink>
  228. <span>
  229. <NuxtLink
  230. :to="{ path: `/newsList/${pageData[5].cid}`}"
  231. v-if="pageData[5]" :title="pageData[5].title">查看更多</NuxtLink>
  232. </span>
  233. </h3>
  234. </div>
  235. <ul class="photo_text" v-if="pageData[5].data[0] != null">
  236. <li v-for="item in pageData[5].data">
  237. <article>
  238. <NuxtLink :to="item.linkurl" v-if="item.islink==1" :title="item.title">
  239. <img :src="item.imgurl" :alt="item.title">
  240. </NuxtLink>
  241. <NuxtLink
  242. :to="{ path: `/newsDetail/${item.id}`}"
  243. v-if="item.islink==0" :title="item.title">
  244. <img :src="item.imgurl" :alt="item.title">
  245. </NuxtLink>
  246. <div>
  247. <h5>
  248. <NuxtLink :to="item.linkurl" v-if="item.islink==1" :title="item.title">{{ item.title }}</NuxtLink>
  249. <NuxtLink
  250. :to="{ path: `/newsDetail/${item.id}`}"
  251. v-if="item.islink==0" :title="item.title">{{ item.title }}</NuxtLink>
  252. </h5>
  253. <p>
  254. <span>{{ item.author }}</span>
  255. <span>{{ getTime(item.updated_at,'month',1) }}</span>
  256. </p>
  257. </div>
  258. </article>
  259. </li>
  260. <li v-for="item in pageData[5].data2">
  261. <article>
  262. <em></em>
  263. <NuxtLink :to="item.linkurl" v-if="item.islink==1" :title="item.title">{{ item.title }}</NuxtLink>
  264. <NuxtLink
  265. :to="{ path: `/newsDetail/${item.id}`}"
  266. v-if="item.islink==0" :title="item.title">{{ item.title }}</NuxtLink>
  267. </article>
  268. </li>
  269. </ul>
  270. </div>
  271. <div class="zixunRight" v-if="pageData.length>=7">
  272. <div class="title">
  273. <h3>
  274. <NuxtLink :to="{ path: `/newsList/${pageData[6].cid}`}" v-if="pageData[6]" :title="pageData[6].alias">
  275. {{ pageData[6].alias }}
  276. </NuxtLink>
  277. <span>
  278. <NuxtLink
  279. :to="{ path: `/newsList/${pageData[6].cid}`}"
  280. v-if="pageData[6]" :title="pageData[6].title">查看更多</NuxtLink>
  281. </span>
  282. </h3>
  283. </div>
  284. <div class="towPic">
  285. <div v-for="item in pageData[6].data" class="picBox">
  286. <div>
  287. <NuxtLink :to="item.linkurl" v-if="item.islink==1" :title="item.title">
  288. <img :src="item.imgurl" :alt="item.title">
  289. </NuxtLink>
  290. <NuxtLink
  291. :to="{ path: `/newsDetail/${item.id}`}"
  292. v-if="item.islink==0" :title="item.title">
  293. <img :src="item.imgurl" :alt="item.title">
  294. </NuxtLink>
  295. </div>
  296. </div>
  297. </div>
  298. <ul class="photo_text">
  299. <li v-for="item in pageData[6].data2">
  300. <article>
  301. <em></em>
  302. <NuxtLink :to="item.linkurl" v-if="item.islink==1" :title="item.title">{{ item.title }}</NuxtLink>
  303. <NuxtLink
  304. :to="{ path: `/newsDetail/${item.id}`}"
  305. v-if="item.islink==0" :title="item.title">{{ item.title }}
  306. </NuxtLink>
  307. </article>
  308. </li>
  309. </ul>
  310. </div>
  311. </div>
  312. <div class="zixunBottom" v-if="pageData[7].data[0] != null">
  313. <img class="left" :src="pageData[7].data[0].imgurl" :alt="pageData[7].data[0].title"
  314. v-if="pageData[7].data[0] && hoverStatus == 0">
  315. <img class="left" :src="pageData[7].data[1].imgurl" :alt="pageData[7].data[1].title"
  316. v-if="pageData[7].data[1] && hoverStatus == 1">
  317. <img class="left" :src="pageData[7].data[2].imgurl" :alt="pageData[7].data[2].title"
  318. v-if="pageData[7].data[2] && hoverStatus == 2">
  319. <img class="left" :src="pageData[7].data[3].imgurl" :alt="pageData[7].data[3].title"
  320. v-if="pageData[7].data[3] && hoverStatus == 3">
  321. <img class="left" :src="pageData[7].data[4].imgurl" :alt="pageData[7].data[4].title"
  322. v-if="pageData[7].data[4] && hoverStatus == 4">
  323. <img class="left" :src="pageData[7].data[5].imgurl" :alt="pageData[7].data[5].title"
  324. v-if="pageData[7].data[5] && hoverStatus == 5">
  325. <ul class="leftList left">
  326. <li v-for="(item, index) in pageData[7].data" @mouseenter="qhPic(index)">
  327. <h4>
  328. <em></em>
  329. <NuxtLink :to="item.linkurl" v-if="item.islink==1" :title="item.title">{{ item.title }}</NuxtLink>
  330. <NuxtLink
  331. :to="{ path: `/newsDetail/${item.id}`}"
  332. v-if="item.islink==0" :title="item.title">{{ item.title }}</NuxtLink>
  333. </h4>
  334. </li>
  335. </ul>
  336. </div>
  337. </div>
  338. <div class="innerRight" v-if="pageData.length>=8">
  339. <div class="title">
  340. <h3>
  341. <NuxtLink :to="{ path: `/newsList/${pageData[7].cid}`}" :title="pageData[7].alias">
  342. {{ pageData[7].alias }}
  343. </NuxtLink>
  344. <span>
  345. <NuxtLink
  346. :to="{ path: `/newsList/${pageData[7].cid}`}"
  347. v-if="pageData[7]" :title="pageData[7].title">查看更多</NuxtLink>
  348. </span>
  349. </h3>
  350. </div>
  351. <ul class="information">
  352. <li v-for="item in pageData[7].data2">
  353. <NuxtLink :to="item.linkurl" v-if="item.islink==1" :title="item.title">
  354. <img :src="item.imgurl" :alt="item.title">
  355. </NuxtLink>
  356. <NuxtLink
  357. :to="{ path: `/newsDetail/${item.id}`}"
  358. v-if="item.islink==0" :title="item.title">
  359. <img :src="item.imgurl" :alt="item.title">
  360. </NuxtLink>
  361. <div class="text">
  362. <h5>
  363. <NuxtLink :to="item.linkurl" v-if="item.islink==1" :title="item.title">{{ item.title }}</NuxtLink>
  364. <NuxtLink :to="{ path: `/newsDetail/${item.id}`}" v-if="item.islink==0" :title="item.title">{{ item.title }}</NuxtLink>
  365. </h5>
  366. <p>{{ item.author }}</p>
  367. </div>
  368. </li>
  369. </ul>
  370. </div>
  371. </div>
  372. </div>
  373. <HomeTopTen :imgurl="adImg3" v-if="adImg3"></HomeTopTen>
  374. <!-- 十强称号logo -->
  375. <HomeTopTen :imgurl="adImg4" v-if="adImg4"></HomeTopTen>
  376. <!-- 页脚部分 -->
  377. <HomeFoot1></HomeFoot1>
  378. </div>
  379. </template>
  380. <script setup>
  381. //0.加载页面依赖 start ---------------------------------------->
  382. import { ref, onMounted } from 'vue';
  383. //0.加载页面依赖 end ---------------------------------------->
  384. //1.获得路由id start ---------------------------------------->
  385. const route = useRoute();
  386. let routeId = 0;//路由id
  387. //判断用户是由于别名跳转还是直接访问二级分类,正常来说只会从别名访问
  388. const getRoute = () => {
  389. if(route.meta.isAlias){
  390. //如果用户从别名访问,数据需要从meta中获取
  391. routeId = route.meta.routeId;
  392. }else{
  393. routeId = route.params.id;
  394. }
  395. }
  396. // 监听路由变化
  397. watch(() => route.path, (newPath) => {
  398. //每当路径变化的时候重新获取routeId
  399. getRoute()
  400. }, { immediate: true })
  401. //1.获得路由id end ---------------------------------------->
  402. //2.页面交互效果 start ---------------------------------------->
  403. //2.1 新闻图片切换
  404. const hoverStatus = ref(0)
  405. const qhPic = function (num) {
  406. console.log(num)
  407. hoverStatus.value = num;
  408. }
  409. //2.2 选项卡切换
  410. let showTabs = ref(1)
  411. let qhtabs = function (number) {
  412. console.log(number)
  413. showTabs.value = number
  414. }
  415. //2.3 展示广告
  416. let adImg1 = ref({})
  417. let adImg2 = ref({})
  418. let adImg3 = ref({})
  419. let adImg4 = ref({})
  420. onMounted(async () => {
  421. //从客户端获取行政职能部门 加快打开速度
  422. const { $webUrl, $CwebUrl } = useNuxtApp();
  423. //广告1
  424. let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_category_0001`
  425. const responseAd1 = await fetch(url, {
  426. headers: {
  427. 'Content-Type': 'application/json',
  428. 'Userurl': $CwebUrl,
  429. 'Origin': $CwebUrl
  430. }
  431. });
  432. const resultAd1 = await responseAd1.json();
  433. adImg1.value = resultAd1.data[0];
  434. //广告2
  435. let url2 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_category_0002`
  436. const responseAd2 = await fetch(url2, {
  437. headers: {
  438. 'Content-Type': 'application/json',
  439. 'Userurl': $CwebUrl,
  440. 'Origin': $CwebUrl
  441. }
  442. });
  443. const resultAd2 = await responseAd2.json();
  444. adImg2.value = resultAd2.data[0];
  445. //广告3
  446. let url3 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_category_0003`
  447. const responseAd3 = await fetch(url3, {
  448. headers: {
  449. 'Content-Type': 'application/json',
  450. 'Userurl': $CwebUrl,
  451. 'Origin': $CwebUrl
  452. }
  453. });
  454. const resultAd3 = await responseAd3.json();
  455. adImg3.value = resultAd3.data[0];
  456. //广告4
  457. let url4 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_category_0004`
  458. const responseAd4 = await fetch(url4, {
  459. headers: {
  460. 'Content-Type': 'application/json',
  461. 'Userurl': $CwebUrl,
  462. 'Origin': $CwebUrl
  463. }
  464. });
  465. const resultAd4 = await responseAd4.json();
  466. adImg4.value = resultAd4.data[0];
  467. })
  468. //2.页面交互效果 end ---------------------------------------->
  469. //3.渲染页面数据 start ---------------------------------------->
  470. //3.1 该页面上所有的导航池 转为动态数据
  471. const pageCategory = ref([]);
  472. //3.2 该页面上需要渲染的所有数据
  473. const pageData = ref([
  474. // { id: 0, data: [], data2: [], title: "", cid: "" },
  475. // { id: 1, data: [], title: "", cid: "" },
  476. // { id: 2, data: [], title: "", cid: "" },
  477. // { id: 3, data: [], title: "", cid: "" },
  478. // { id: 4, data: [], title: "", cid: "" },
  479. // { id: 5, data: [], title: "", cid: "" },
  480. // { id: 6, data: [], title: "", cid: "" },
  481. // { id: 7, data: [], title: "", cid: "" },
  482. // { id: 8, data: [], title: "", cid: "" },
  483. // { id: 9, data: [], title: "", cid: "" },
  484. // { id: 10, data: [], title: "", cid: "" },
  485. // { id: 10, data: [], title: "", cid: "" },
  486. // {
  487. // id: 11,
  488. // title: "",
  489. // data: [],
  490. // data1: [],
  491. // data2: [],
  492. // data3: [],
  493. // data4: [],
  494. // category_id1: "",
  495. // category_id2: "",
  496. // category_id3: "",
  497. // category_id4: "",
  498. // title1: "",
  499. // title2: "",
  500. // title3: "",
  501. // title4: "",
  502. // cid: ""
  503. // },
  504. // { id: 12, data1: [], data2: [], data3: [], cid: "" },
  505. ])
  506. const navSize = ref("");
  507. //3.3 获取所有导航
  508. try {
  509. const navigateData = await requestDataPromise('/web/getWebsiteModelCategory', {
  510. method: 'GET',
  511. query: {
  512. 'placeid': 1,
  513. 'pid': routeId,
  514. 'num': 8
  515. },
  516. });
  517. if(navigateData.code == 200){
  518. // 遍历可用的导航池放到页面中
  519. for (let index in navigateData.data) {
  520. let data = {
  521. title: navigateData.data[index].name,
  522. cid: navigateData.data[index].category_id,
  523. children_count: navigateData.data[index].children_count,
  524. alias: navigateData.data[index].alias,
  525. data:[],
  526. data1:[],
  527. data2:[],
  528. data3:[],
  529. data4:[],
  530. category_id1:"",
  531. category_id2:"",
  532. category_id3:"",
  533. category_id4:"",
  534. title1: "",
  535. title2: "",
  536. title3: "",
  537. title4: ""
  538. };
  539. if (navigateData.data[index].is_url == 1) {
  540. // 处理 URL 的逻辑
  541. } else {
  542. //每个页面最多8个模块
  543. pageData.value.push(data);
  544. }
  545. }
  546. //导航池加载完毕,开始申请模块数据
  547. await getPageData1();
  548. await getPageData2();
  549. await getPageData3();
  550. await getPageData4();
  551. await getPageData5();
  552. await getPageData6();
  553. await getPageData7();
  554. await getPageData8();
  555. }else{
  556. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  557. console.log("错误位置:分类页导航池")
  558. console.log("后端错误反馈:",navigateData.message)
  559. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  560. }
  561. } catch (error) {
  562. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  563. console.log("错误位置:分类页导航渲染阶段")
  564. console.log("错误:导航池渲染执行接口出错!请检查首页的14的模块的具体执行方法!")
  565. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  566. }
  567. //获得模块数据
  568. async function getPageData(catid,img_num,text_num,modulesNum,childNavNum,childImgNum,childTextNum){
  569. const mkdata = await requestDataPromise('/web/getWebsiteCatidArticle', {
  570. method: 'GET',
  571. query: {
  572. 'catid': catid, //catid
  573. 'img_num': img_num, //图片数量
  574. 'text_num': text_num, //文字数量
  575. 'child_catnum':childNavNum,//子级栏目菜单数量
  576. 'child_imgnum':childImgNum,//子栏目展示图片新闻数量
  577. 'child_textnum':childTextNum//子栏目展示文字新闻数量
  578. },
  579. });
  580. if(modulesNum == 1){
  581. if(mkdata.data.img.length > 0){
  582. pageData.value[0].data.push(mkdata.data.img[0]);
  583. }
  584. if(mkdata.data.img.length > 1){
  585. pageData.value[0].data2.push(mkdata.data.img[1]);
  586. }
  587. if(mkdata.data.img.length > 2){
  588. pageData.value[0].data2.push(mkdata.data.img[2]);
  589. }
  590. if(mkdata.data.img.length > 3){
  591. pageData.value[0].data2.push(mkdata.data.img[3]);
  592. }
  593. if(mkdata.data.img.length > 4){
  594. pageData.value[0].data2.push(mkdata.data.img[4]);
  595. }
  596. // pageData.value[0].data.push(mkdata.data.img[0]);
  597. // pageData.value[0].data2.push(mkdata.data.img[1]);
  598. // pageData.value[0].data2.push(mkdata.data.img[2]);
  599. // pageData.value[0].data2.push(mkdata.data.img[3]);
  600. // pageData.value[0].data2.push(mkdata.data.img[4]);
  601. pageData.value[0].data3 = mkdata.data.text;
  602. }
  603. if(modulesNum == 2){
  604. pageData.value[1].data = mkdata.data.img;
  605. }
  606. if(modulesNum == 3){
  607. pageData.value[2].data = mkdata.data.img;
  608. pageData.value[2].data2 = mkdata.data.text;
  609. }
  610. if(modulesNum == 4){
  611. pageData.value[3].data = mkdata.data.img;
  612. pageData.value[3].data2 = mkdata.data.text;
  613. }
  614. if(modulesNum == 5){
  615. pageData.value[4].data = mkdata.data.img;
  616. pageData.value[4].data2 = mkdata.data.text;
  617. }
  618. if(modulesNum == 6){
  619. if(mkdata.data.img.length > 0){
  620. pageData.value[5].data.push(mkdata.data.img[0]);
  621. }
  622. pageData.value[5].data2 = mkdata.data.text;
  623. if(mkdata.data.img.length > 1){
  624. pageData.value[7].data.push(mkdata.data.img[1]);
  625. }
  626. if(mkdata.data.img.length > 2){
  627. pageData.value[7].data.push(mkdata.data.img[2]);
  628. }
  629. if(mkdata.data.img.length > 3){
  630. pageData.value[7].data.push(mkdata.data.img[3]);
  631. }
  632. if(mkdata.data.img.length > 4){
  633. pageData.value[7].data.push(mkdata.data.img[4]);
  634. }
  635. if(mkdata.data.img.length > 5){
  636. pageData.value[7].data.push(mkdata.data.img[5]);
  637. }
  638. }
  639. if(modulesNum == 7){
  640. pageData.value[6].data = mkdata.data.img;
  641. pageData.value[6].data2 = mkdata.data.text;
  642. }
  643. //模块8 向后移动一个位置
  644. if(modulesNum == 8){
  645. pageData.value[7].data2 = mkdata.data.img;
  646. }
  647. }
  648. //新农村
  649. //模块1 理论前沿
  650. async function getPageData1() {
  651. await getPageData(pageData.value[0].cid,5,8,1,0,0,0);
  652. }
  653. //模块2 典型经验
  654. async function getPageData2() {
  655. await getPageData(pageData.value[1].cid,5,0,2,0,0,0);
  656. }
  657. //模块3 农业天地
  658. async function getPageData3() {
  659. await getPageData(pageData.value[2].cid,1,6,3,0,0,0);
  660. }
  661. //模块4 美丽乡村
  662. async function getPageData4() {
  663. await getPageData(pageData.value[3].cid,1,6,4,0,0,0);
  664. }
  665. //模块5 农民之家
  666. async function getPageData5() {
  667. await getPageData(pageData.value[4].cid,1,6,5,0,0,0);
  668. }
  669. //模块6 农业天地
  670. async function getPageData6() {
  671. await getPageData(pageData.value[5].cid,6,3,6,0,0,0);
  672. }
  673. //模块7 农村建设
  674. async function getPageData7() {
  675. await getPageData(pageData.value[6].cid,2,3,7,0,0,0);
  676. }
  677. //模块8 高端资讯
  678. async function getPageData8() {
  679. await getPageData(pageData.value[7].cid,4,0,8,0,0,0);
  680. }
  681. // 注意,为了保持模块的数量,当前固定为8个
  682. // 所以这里的农业天地,合并了原来是下面的7号模块
  683. // 而原本是7号模块的地方现在变成了8号模块
  684. //3.渲染页面数据 end ---------------------------------------->
  685. //4.设置seo信息 start---------------------------------------->
  686. //4.1 设置seo信息
  687. const setData = await requestDataPromise('/web/getWebsiteCategoryHead', {
  688. method: 'GET',
  689. query: {
  690. 'catid': routeId
  691. },
  692. });
  693. if(setData.code == 200){
  694. let seoTitle = setData.data.seo_title;
  695. let seoDescription = setData.data.seo_description;
  696. let seoKeywords = setData.data.seo_keywords;
  697. let seoSuffix = setData.data.suffix;
  698. let seoName = setData.data.website_name;
  699. useSeoMeta({
  700. title: seoTitle + "_" + seoSuffix,
  701. meta: [
  702. { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
  703. { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix , tagPriority: 10 }
  704. ]
  705. });
  706. }else{
  707. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  708. console.log("错误位置:设置分类页面SEO数据")
  709. console.log("后端错误反馈:",setData.message)
  710. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  711. }
  712. //4.设置seo信息 end---------------------------------------->
  713. </script>
  714. <style lang="less" scoped>
  715. @import '@/assets/css/class.less';
  716. </style>